<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>员工管理</el-breadcrumb-item>
                    <el-breadcrumb-item>权限变更</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="queryInfo.userId" placeholder="输入用户编号" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserById"></el-button></el-input>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-card>
                <el-table
                        :data="userlist"
                        style="width: 100%">
                    <el-table-column
                            prop="userId"
                            label="用户编号"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="roleId"
                            label="角色"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="10%">
                        <template slot-scope="scope">
                            <el-button type="text" >修改权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        style="margin-top: 15px; display: flex;justify-content:flex-end;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            this.getUserList()
        },
        methods: {
            handleSizeChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getUserList()
            },
            handleCurrentChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getUserList()
            },

            onSubmit() {
                console.log('submit!');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //获取用户列表
            async getUserList(){
                const {data : resp}=await this.$http.get('/sysUsersRoles/findAll/'+ this.queryInfo.pagenum + '/' + this.queryInfo.pagesize)
                if(resp.code !== 200) {return this.$message.error('获取用户用户列表失败') }
                /*this.$message.success('')*/
                this.userlist = resp.data.records
                this.total = resp.data.total
            },
            //通过id查找用户
            async getUserById(){
                const {data: resp} = await this.$http.get('sysUsers/getUsrById/' + this.queryInfo.userId)
                if (resp.code !== 200) {
                    return this.$message.error('获取用户列表失败！')
                }
                this.userlist= [resp.data]
                console.log(this.userlist)
            },
        },

        data() {
            return {
                queryInfo: {
                    userId:'',
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 5
                },
                addUserForm:{
                    userId:'',
                    address:'',
                    age:'',
                    userName:'',
                    tel:'',
                    password:'',
                    idNum:''
                },
                userlist: [{}],
                total: 0,
                //查询到的用户信息
                editdata:{
                },
                addUserRules:{
                    address: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'},
                        {min: 1, max: 18, message: '长度为2 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入业主名字', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    userName: [
                        {required: true, message: '请输入业主年龄', trigger: 'blur'},
                        {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 11, message: '长度为11个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入房子编号', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1到 11个字符', trigger: 'blur'}
                    ],
                    idNum: [
                        {required: true, message: '请输入房子编号', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 11 个字符', trigger: 'blur'}
                    ],
                },
                editUserForm:{},
                dialogEdit: false,
                dialogCreate:false,
            }
        },
    }
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

